<template>
    <div id="collection">
           <div class='header4'>
            <div class='back'>
                <router-link to="/mine">
                    <i class='iconfont'>&#xe640;</i>
                </router-link> 
            </div>
            <span class='title'>收藏夹</span>
            <div class='right'>
                <a class="edit tubiao">
                    
                    
                        <i class='iconfont'>&#xe618;</i>
                        <span>编辑</span>

                </a>
                <a class='nav1 tubiao' id='nav1'>
                    <i class='iconfont'>&#xe60e;</i>
                    <span>导航</span>
                </a>
                
               <ul class='navList1' id='list'>
          
                  <li>
                    <router-link to="/home">
                      <i class='iconfont'>&#xe6ee;</i>
                      首页
                    </router-link>
                  </li>
                  <li>
                    <router-link to="/mine">
                      <i class='iconfont'>&#xe60f;</i>
                      我的
                    </router-link>
                  </li>
                  <li>
                    <router-link to="/search">
                      <i class='iconfont'>&#xe600;</i>
                      搜索
                    </router-link>
                  </li>
            </ul>
            </div>
        </div>
        <div class='btn-wrapper'>
            
            <ul class='tab'>
                <li class="active">
                    <a href='#'>
                        团购（
                        <span class='number'>2</span>
                        )
                    </a>
                </li>
                <li>
                    <a href='#'>
                        商家（
                        <span class='number'>0</span>
                        )
                    </a>
                </li>
            </ul>
        </div>
        <div class='list'>
            
            <ul>
                
                <li v-for="item in list">
                    <a href="#">
                        
                        <img :src="'http://127.0.0.1:2000/'+item.img" alt=""/>
                        
                        <div class='right'>
                            <div class='right-inner'>
                                <div class='title'>
                                    {{item.title}}
                                </div>
                                <div class='text'>{{item.title}}</div>
                                <div class='price'>
                                    <span class='strong'>{{item.price}}</span>
                                    <span class='strong-text'>元</span>
                                    <span class='storePri'>门市价:{{item.old_price}}元</span>
                                    <span class='sold'>已售4798</span>
                                </div>
                            </div>
                            
                        </div>
                    </a>
                </li>
            
            </ul>
        </div>
        <div class="footer">
            <div class="footer-bar">
                <a href="#" class="login">{{username}}</a>
                
                <div class="city">
                    <span>城市：</span>
                    <a href="#" class="sz">深圳</a>
                </div>
            </div>
            <div class="footer-nav">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">订单</a></li>
                    <li><a href="#">客户端</a></li>
                    <li><a href="#">电脑版</a></li>
                    <li><a href="#">帮助</a></li>
                </ul>
            </div>
            <div class="footer-router-links">
                <span>友情链接:</span>
                <a href="#">猫眼电影</a>
                <a href="#">大众点评</a>
                <a href="#">大众点评下载</a>
            </div>
            <div class="footer-copyright">
                <div class="hr"></div>
                <span>
                    ©2017 美团网 
                    <a href="#">京ICP证070791号</a>
                </span>
            </div>
        </div>
    </div>
</template>

<script>
//引入jQuery
   import $ from 'jquery';
   
    export default {
        name: 'collection',
        data(){
            return{
                username:JSON.parse(sessionStorage.getItem("user_info")).username,
                userid:JSON.parse(sessionStorage.getItem("user_info"))._id,
                list:[]
            }
        },
        methods:{
            
        },
        computed:{

        },
         mounted(){
                console.log(this.list);
                var nav = document.getElementById('nav1');
				var list = document.getElementById('list');
				nav.onclick = function(){
					
					if(list.style.display == 'block'){
						
						list.style.display = 'none';
						
					}else{
						
						list.style.display = 'block'
					}
					
				}
                var lists=JSON.parse(localStorage.getItem("collectlist"));  //将当前用户的收藏push到list中
                for(var i=0;i<lists.length;i++){
                    if(lists[i].aid==this.userid){
                        this.list.push(lists[i]);
                    }
                }

        }
    }
</script>